body{width: 100%}
#contenedor{margin: 0 auto; width: 100%;}
#cabecera{width: 100%;height: 36px;
	background: linear-gradient(top,#C3C3C3,#EDEDED);
	background: -moz-linear-gradient(top,#C3C3C3,#EDEDED);
	background: -ms-linear-gradient(top,#C3C3C3,#EDEDED);
	background: -webkit-linear-gradient(top,#C3C3C3,#EDEDED);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#C3C3C3', EndColorStr='#EDEDED');
   font-size: 0.75em;
   position: fixed;
   z-index: 3;
}
#logo{margin-left: 13px; margin-top: 6px;}
#menu_login{float: right; margin-right: 13px; margin-top: 6px;}
#menu_login a, #opciones_configuracion li a{text-decoration: none; color: #000; font-size: 0.9em}
#control_usuario{vertical-align: middle;}

#divload{z-index:4; position:fixed; background-color: rgba(212, 212, 212, 0.2); width:100%; height: 560px; top:0; left:0;}
#divload img{z-index:5; position:fixed; top:48%; left:48%;}

#configuracion{
   background: #f7f7f7; width: 180px; position: absolute; top: 40px; right: .5em; padding: 20px 12px 10px;
   font-style: normal; display:none; border: 1px solid #999999;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   -ms-border-radius: 8px;
   border-radius: 8px;
}

#configuracion:after{
   content: '';
   border-top: 8px solid transparent;
   border-bottom: 8px solid #fff;
   border-right: 8px solid transparent;
   border-left: 8px solid transparent;
   right: 8px;
   position: absolute;
   top: -16px;
}

#configuracion:before{
   content: '';
   border-top: 8px solid transparent;
   border-bottom: 9px solid #999;
   border-right: 8px solid transparent;
   border-left: 8px solid transparent;
   right: 8px;
   position: absolute;
   top: -18px;
}

#opciones_configuracion li:first-child{margin-top: 3px;}
#opciones_configuracion li{padding:.8em}
#opciones_configuracion li:hover{background:#ededed}
#opciones_configuracion li a:before{content: '';background-image: url(../imagenes/sprite_login.png);
   background-repeat: no-repeat; height: 16px; width: 16px; padding: 1px 0 1px 25px; margin-left:-8px;}

.user_admin > a:before{background-position: 0 -23px;}
.user_config > a:before{background-position: 0 -40px;}
.user_manual > a:before{background-position: 0 -57px;}
.user_salir > a:before{background-position: 0 -74px;}
.user_clave > a:before{background-position: 0 -90px;}

#titulo_nombre{width: 90%; height:22px; padding:8px; background: #c4c4c4; top:-50px; font-size: 0.9em;
            border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 2px 0 rgba(255,255,255,.5);}

#cuerpo{width: 100%; position: absolute;}
#barra_conocimiento{width: 21.38%; height: 89.7%; background: #EDEDED; position: relative; float: left;
   left: 0; border-right: 1px solid #C0C0C0;}
#barra_procedimiento{width: 36.42%; height: 89.7%; background: #EDEDED; position: relative; float: right;
   right: 0; border-left: 1px solid #C0C0C0;}



/*--- menu ---*/
#menu{width: 100%; height: 32px; background: #EDEDED; top:36px; border-bottom: 1px solid #C0C0C0; position: fixed;
   z-index: 2;}

#menu_principal li{
 position:relative; margin: 20px; width:120px; height: 21px; background: #ededed; border:solid 1px #c0c0c0;
 float: left; list-style: none; margin: 0px; text-indent: 45px; color: #000; padding-top: 10px !important;
 font-size: 0.68em;
}
#menu_principal li a{text-decoration: none; color: #000;}

#menu_principal li:before, #menu_principal li:after{border-bottom: 16px solid transparent; border-top: 16px solid transparent; top:-1px;}
#menu_principal li:before, #menu_principal li:after{content: " "; position: absolute; display: block; width: 0; height: 0;}
#menu_principal li:after{border-left: 16px solid #ededed; right: -15px; z-index: 2;}
#menu_principal li:before{ border-left: 16px solid #c0c0c0; right: -16px; z-index: 1;}

#menu_principal li:hover{background: #fff;}
#menu_principal li:hover:after{border-left: 16px solid #fff;}

.circulo{
   text-indent: 0;
   position: absolute;
   left: 20px;
   top: 54%;
   margin-top: -1em;
   background: #ededed;
   height: 1.4em;
   width: 1.4em;
   line-height: 1.4em;
   border: 2px solid #fff;
   text-align: center;
   font-weight: bold;
   border-radius: 1.4em;
   transition: all .3s ease-out;
}

#menu_principal li:first-child{width: 40px; text-indent: 15px; background: #ededed; border: 0;}
#menu_principal li:first-child:before, #menu_principal li:first-child:after{content: " "; border: 0;}
#menu_principal li:nth-child(2){text-indent: 30px; border-bottom-left-radius: 8px; border-top-left-radius: 8px;}

.menu_activo{background: #fff !important;}
.menu_activo:after{border-left: 16px solid #fff !important;}
.menu_activo .circulo{background: #fff !important; border: 2px solid #c0c0c0;}


/*--- area de conocimiento ---*/
#barra_conocimiento{position:fixed; top:69px; overflow:hidden; overflow-x: hidden;}
#barra_conocimiento nav{overflow-y: scroll; overflow-x: scroll; position: absolute; top: 53px; bottom:0px; width: 100%;}
#sl_proyecto{border: 1px solid #d2d2d2; padding: 4px; position: relative; top: 13px; left: 13px;
   width: 86.58%; border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   -webkit-border-radius: 3px; font-size: 0.75em !important}


#area_conocimiento{margin-left: -40px; text-transform: uppercase; margin-top: 0px; margin-bottom: 0px}
#area_conocimiento > li{background-color: #ededed; border: 1px solid #dedede; padding: 1em; cursor: pointer;
   margin-right: -8em}

/*--- procedimientos ---*/
#control_procedimiento{float: right; margin-right: 17px; margin-top: 6px;}
#control_btl_inform{float: right; margin-right: 17px; margin-top: 6px;}
#barra_procedimiento{position: fixed; top: 69px; font-size: 0.75em;}
#barra_procedimiento div{margin-top: 10px; margin-left: 10px; font-size: 0.90em;}
#barra_procedimiento select{display: inline-block; width: 93%; padding: 4px; border-radius: 4px;
   border: 1px solid #C0C0C0; font-size: 1.1em;}


#lectura_procedimiento {overflow:auto; background:#ededed; position: relative; padding: 0 17px 0 10px;
   height: 55% !important; width: 90% !important;}

#lectura_procedimiento p{margin: 15px 0; color: #000;}

/*--- lecciones aprendidas ---*/
#lecciones_aprendidas{width: 95%; height: 25.13%; background: #fff; overflow: hidden;}
#lecciones_aprendidas h1{height: 11px; top: 0px; border-bottom: 1px solid #dadada;
   padding: 2px 6px;
   background: linear-gradient(top,#fefefe,#efefef);
   background: -moz-linear-gradient(top,#fefefe,#efefef);
   background: -ms-linear-gradient(top,#fefefe,#efefef);
   background: -webkit-linear-gradient(top,#fefefe,#efefef);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fefefe', EndColorStr='#efefef');}


/*--- contenedor de formularios ---*/
#formulario{width: 60.4%; height: 703px; margin-left: 14.3%; margin-top: 68px; background: #fff; position: absolute;
   padding: 20px 15px 15px 15px; z-index: -1; font-size: 0.70em; font-family: verdana; overflow-y: auto;}



#formulario .panel_editable{margin-top: 0; padding-top: 45px;}
.panel_editable, .contenido_formulario{width: 100%;}
.panel_editable img{float: right; margin: 5px;}
.panel_editable > div, #lectura_procedimiento{line-height:15px;}

.nicEdit-main{background: #fff; height:100px; overflow-y: auto !important;}


#tblobjetivos, #tblencargo{border-color: #f3f3f3; border-collapse: collapse; margin: 0 auto;}
#tblobjetivos td:nth-child(1), #tblencargo td:nth-child(1){text-indent: 5px;};
#tblobjetivos td{border: 1px solid #ddd;}
#tblobjetivos td>input[type="text"]{font-size: 1em;}
#tblencargo td:nth-child(2){padding-right: 5px;}


.pointer{cursor: pointer;}
.hidden{display:none !important}

.nice_edit{width: 100%; height: 120px; border: 1px solid #ccc; resize: none; outline: none; display: block;}
.titulo{font-weight: bold;}

hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.2); border-top:1px solid rgba(140,140,140,0.9);
   margin:5px 10px; clear:both;}


.texto-suspensivo{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

/*--- explorador de archivos---*/
#explorador_file{width: 101.1%; height: 250px;}

#menu_file{background: #efefef; border: 1px solid #ccc; width: 98%; height: 20px; padding: 2px 5px;}
#menu_file li{display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(../imagenes/folder.png);
   cursor: pointer; margin: 2px;}
.folder_add {width:16px; height:16px; background-position: -2px -2px}
.folder_compartir {width:16px; height:16px; background-position: -20px -2px}


/**willian**/
.folder_edita {width:16px; height:16px; background-position: -55px -2px}
.folder_papelera {width: 18px; height: 16px; background-position: -200px -2px}	
.folder_delete {width:16px; height:16px; background-position: -38px -2px}
.folder_link {width:16px; height:16px; background-position: -110px -2px}
.upload {width:16px; height:16px; background-position: -182px -2px}

#tree, #file{height: 100% !important; background: #fff; overflow: auto; float: left; border-bottom: 1px solid #ccc;}
#tree{width: 30%; border-left: 1px solid #ccc;}
#file{width: 67.3%; padding-left: 15px; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}


.button{border:1px solid #c3bfbf; display:inline-block; font-size:10px; color:#666666; padding: 3px 3px 3px 3px;
   margin:5px 3px; background-color:#ededed; cursor:pointer;}
.button>img{vertical-align: middle}

#new_carpeta{width: 250px;}

@media screen and (max-width: 1366px) {
   #barra_conocimiento{max-width: 219px;}
   #barra_procedimiento{max-width: 373px;}
   #lectura_procedimiento {padding: 0 15px; margin: 0 !important; width: 25%;}

   #formulario{width: 54.1%; height: 547px; margin-left: 16.3%;}
   .panel_editable, .contenido_formulario{width: 100%;}

   #menu_file{background: #efefef; border: 1px solid #ccc; width: 97.6%; height: 20px; padding: 2px 5px;}
   #menu_file li{display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(../imagenes/folder.png);
   cursor: pointer; margin: 2px;}
   .folder_add {width:16px; height:16px; background-position: -2px -2px}
   .folder_compartir {width:16px; height:16px; background-position: -20px -2px}
   .folder_delete {width:16px; height:16px; background-position: -38px -2px}
   .folder_link {width:16px; height:16px; background-position: -110px -2px}
   .upload {width:16px; height:16px; background-position: -182px -2px}

   #tree, #file{height: 100% !important; background: #fff; overflow: auto; float: left; border-bottom: 1px solid #ccc;}
   #tree{width: 30.14%; border-left: 1px solid #ccc;}
   #file{width: 66.5%; padding-left: 15px; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
}


@media screen and (min-width: 1400px) {
   #barra_conocimiento{max-width: 219px; height: 91.3%}
   #barra_procedimiento{max-width: 373px; height: 91.3%}
}


@media screen and (max-width: 1024px) {
   #barra_conocimiento{max-width: 219px;}
   #barra_procedimiento{max-width: 373px; display: none;}
   #lectura_procedimiento {padding: 0 15px; margin: 0 !important; width: 25%;}

   #formulario{width: 74.8%; height: 559px; margin-left: 22.3%;}
   .panel_editable, .contenido_formulario{width: 100%;}

   #menu_file{background: #efefef; border: 1px solid #ccc; width: 97.6%; height: 20px; padding: 2px 5px;}
   #menu_file li{display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(../imagenes/folder.png);
   cursor: pointer; margin: 2px;}
   .folder_add {width:16px; height:16px; background-position: -2px -2px}
   .folder_compartir {width:16px; height:16px; background-position: -20px -2px}
   .folder_delete {width:16px; height:16px; background-position: -38px -2px}
   .folder_link {width:16px; height:16px; background-position: -110px -2px}
   .upload {width:16px; height:16px; background-position: -182px -2px}

   #tree, #file{height: 100% !important; background: #fff; overflow: auto; float: left; border-bottom: 1px solid #ccc;}
   #tree{width: 30.14%; border-left: 1px solid #ccc;}
   #file{width: 66.5%; padding-left: 15px; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
}